<template>
	<div class="content" style="display: flex; color: #409eff; height: 100%">
		<div class="con-l" style="flex: 1; display: flex; flex-direction: column">
			<div
				style="
					flex: 1;
					height: 50%;
					display: flex;
					color: #409eff;
					background: #2d4961;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				"
				to="/detail">
				<h3 style="margin-bottom: 10px">{{ $t('index.radar') }}</h3>
				<el-image :src="broadcast" style="width: 50%"></el-image>
			</div>
			<!-- <div  @click="">雷达复示</div> -->
			<div
				style="
					flex: 1;
					color: #409eff;
					height: 50%;
					display: flex;
					background: #2d4961;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				"
				to="/detail">
				<h3 style="margin-bottom: 10px">
					{{ $t('index.generatorSwitchboard') }}
				</h3>
				<el-image v-if="elec" :src="elec" style="width: 50%"></el-image>
			</div>
		</div>

		<div class="leftEngine">
			<Gauge
				:value="allData?.left_main?.z101.currentValue"
				:min="0"
				:max="1000"
				:customStyle="{ width: '100%', height: '50%' }"
				:text="$t('index.hostTachometer')"></Gauge>
			<Gauge
				:value="HEXtoDEC(allData?.left_main?.z102.currentValue)"
				:customStyle="{ width: '100%', height: '50%' }"
				:min="-300"
				:max="300"
				:text="$t('index.tailshaftTachometer')"></Gauge>
		</div>
		<!-- 左机 -->
		<div class="enginebj" @click="routerPush('/equipment/main/left')">
			<div class="wrap">
				<!-- 排气温度 -->
				<CardBoxPointLayout top="9.7%" left="53%" :gutterY="8">
					<template #default="{ gutterY }">
						<CardBoxPoint
							:width="16"
							:height="16"
							v-for="(item, idx) in [
								allData?.left_main?.z149?.state,
								allData?.left_main?.z150?.state,
								allData?.left_main?.z151?.state,
								allData?.left_main?.z152?.state,
								allData?.left_main?.z153?.state,
								allData?.left_main?.z154?.state
							]"
							:key="idx"
							:position="false"
							:judg-ment="true"
							:color-id="item"
							:gutterY="gutterY"></CardBoxPoint>
					</template>
				</CardBoxPointLayout>

				<!-- 轴承温度 -->
				<CardBoxPointLayout top="8.7%" left="73%" :gutterY="6">
					<template #default="{ gutterY }">
						<CardBoxPoint
							:width="16"
							:height="16"
							v-for="(item, idx) in [
								allData?.left_main?.z141?.state,
								allData?.left_main?.z142?.state,
								allData?.left_main?.z143?.state,
								allData?.left_main?.z144?.state,
								allData?.left_main?.z145?.state,
								allData?.left_main?.z146?.state,
								allData?.left_main?.z147?.state
							]"
							:key="idx"
							:position="false"
							:judg-ment="true"
							:color-id="item"
							:gutterY="gutterY"></CardBoxPoint>
					</template>
				</CardBoxPointLayout>

				<!-- 其他 -->
				<CardBoxPointLayout top="12.8%" left="34%" :gutterY="10">
					<template #default="{ gutterY }">
						<CardBoxPoint
							:width="16"
							:height="16"
							v-for="(item, idx) in [
								allData?.left_main?.z129?.state, // 滑油温度
								allData?.left_main?.z130?.state, // 滑油压力
								allData?.left_main?.z134?.state, // 冷却水温度
								allData?.left_main?.z118?.state // 冷却水压力
							]"
							:key="idx"
							:position="false"
							:judg-ment="true"
							:color-id="item"
							:gutterY="gutterY"></CardBoxPoint>
					</template>
				</CardBoxPointLayout>

				<!-- 运行提示 -->
				<div
					class="round"
					:style="{
						top: runMainLight ? '56.8%' : '57.6%',
						left: runMainLight ? '34%' : '38%'
					}">
					<div
						:class="['circle']"
						:style="{
							background: colors[runMainLight]
						}"></div>
					<div
						:class="{
							circle_bottom: true,
							animation: runMainLight
						}"
						:style="{
							background: colors[runMainLight],
							display: runMainLight
						}"></div>
					<!-- 'animation' -->
					<div
						:class="{
							circle_bottom2: true,
							animation2: runMainLight
						}"
						:style="{
							background: colors[runMainLight],
							display: runMainLight ? 'block' : 'none'
						}"></div>
					<!-- 'animation2' -->
				</div>
			</div>
		</div>

		<!-- 右机 -->
		<div class="enginebj" @click="routerPush('/equipment/main/right')">
			<div class="wrap">
				<!-- 排气温度 -->
				<CardBoxPointLayout top="9.7%" left="53%" :gutterY="8">
					<template #default="{ gutterY }">
						<CardBoxPoint
							:width="16"
							:height="16"
							v-for="(item, idx) in [
								allData?.right_main?.z249?.state,
								allData?.right_main?.z250?.state,
								allData?.right_main?.z251?.state,
								allData?.right_main?.z252?.state,
								allData?.right_main?.z253?.state,
								allData?.right_main?.z254?.state
							]"
							:key="idx"
							:position="false"
							:judg-ment="true"
							:color-id="item"
							:gutterY="gutterY"></CardBoxPoint>
					</template>
				</CardBoxPointLayout>
				<!-- 轴承温度 -->
				<CardBoxPointLayout top="8.7%" left="73%" :gutterY="6">
					<template #default="{ gutterY }">
						<CardBoxPoint
							:width="16"
							:height="16"
							:position="false"
							:gutterY="gutterY"
							:judg-ment="true"
							v-for="(item, idx) in [
								allData?.right_main?.z241?.state,
								allData?.right_main?.z242?.state,
								allData?.right_main?.z243?.state,
								allData?.right_main?.z244?.state,
								allData?.right_main?.z245?.state,
								allData?.right_main?.z246?.state,
								allData?.right_main?.z247?.state
							]"
							:key="idx"
							:color-id="item"></CardBoxPoint>
					</template>
				</CardBoxPointLayout>
				<!-- 其他 -->
				<CardBoxPointLayout top="12.8%" left="34%" :gutterY="10">
					<template #default="{ gutterY }">
						<CardBoxPoint
							:width="16"
							:height="16"
							:position="false"
							:gutterY="gutterY"
							:judg-ment="true"
							v-for="(item, idx) in [
								allData?.right_main?.z229?.state,
								allData?.right_main?.z230?.state,
								allData?.right_main?.z234?.state,
								allData?.right_main?.z221?.state
							]"
							:key="idx"
							:color-id="item"></CardBoxPoint>
					</template>
				</CardBoxPointLayout>
				<!-- 运行提示 -->

				<div
					class="round"
					:style="{
						top: runMainLight ? '56.8%' : '57.6%',
						left: runMainLight ? '34%' : '38%'
					}">
					<div
						:class="['circle']"
						:style="{
							background: colors[runMainLight]
						}"></div>
					<div
						:class="{
							circle_bottom: true,
							animation: runMainLight
						}"
						:style="{
							background: colors[runMainLight],
							display: runMainLight
						}"></div>
					<!-- 'animation' -->
					<div
						:class="{
							circle_bottom2: true,
							animation2: runMainLight
						}"
						:style="{
							background: colors[runMainLight],
							display: runMainLight ? 'block' : 'none'
						}"></div>
				</div>
			</div>
		</div>

		<div class="rightEngine">
			<Gauge
				:value="allData?.right_main?.z201.currentValue"
				:customStyle="{ width: '100%', height: '50%' }"
				:min="0"
				:max="1000"
				:text="$t('index.hostTachometer')"></Gauge>
			<Gauge
				:value="HEXtoDEC(allData?.right_main?.z202.currentValue)"
				:min="-300"
				:max="300"
				:customStyle="{ width: '100%', height: '50%' }"
				:text="$t('index.tailshaftTachometer')"></Gauge>
		</div>
	</div>
</template>

<script setup>
import { color as colors } from '@/mixins/globalParam.js'
// 插件
import mpegts from 'mpegts.js'
// 图片
import broadcast from '@/assets/image/antenna-broadcast.png'
import elec from '@/assets/image/elec.png'
import vv from '@/assets/image/vv.png'
// echart
import Gauge from '@/echarts/Gauge.vue'
// 组件
import statusBar from './component/statusBar.vue'
import CardBoxPoint from '@/components/CardDataPoint.vue'
import CardBoxPointLayout from '@/components/CardDataPointLayout.vue'
//  plugins
import { routerPush } from '@/plugins/index.js'
import { HEXtoDECSymbols, getImageUrl } from '@/utils/utils.js'

let allData = inject('allData')
const initCreatePlay = ref([])
const input = ref(['http://1.12.237.14:8432/live?port=1935&app=live&stream=myapp'])
const option = {
	enableStashBuffer: false,
	liveBufferLatencyChasing: true,
	liveBufferLatencyChasingOnPaused: true,
	liveSync: true,
	accurateSeek: true,
	liveBufferLatencyMaxLatency: 0.9,
	liveBufferLatencyMinRemain: 0.2,
	customSeekHandler: true,
	lazyLoad: false,
	reuseRedirectedURL: true,
	liveSyncPlaybackRate: 3.4
}
// DOM
const videoRefList = ref([])
const setVideoRefList = (ele) => {
	videoRefList.value.push(ele)
}

let HEXtoDEC = computed(() => {
	return (hexValue) => {
		return HEXtoDECSymbols(hexValue)
	}
})

const handleVideoPause = () => {}
const runMainLight = computed(() => {
	return (
		hostRunningStatusMethod(
			1,
			allData.value?.right_main?.z231?.currentValue,
			allData.value?.right_main?.z232?.currentValue
		) ||
		hostRunningStatusMethod(
			0,
			allData.value?.right_main?.z231?.currentValue,
			allData.value?.right_main?.z232?.currentValue
		)
	)
})
const hostRunningStatusMethod = (str, zc, dc) => {
	let point = 10
	let zcValue = zc ?? 0
	let dcValue = dc ?? 0
	if (zcValue < point && zcValue < point) return 0
	if (!str) {
		// 倒车
		if (dcValue >= point) return 2
		else return 0
	} else {
		if (zcValue >= point) return 3
		else return 0
		// 正车
	}
}
// 开机转态
const hostRunningStatus = computed(() => {
	return (str, zc, dc) => {
		let point = 10
		let zcValue = zc ?? 0
		let dcValue = dc ?? 0
		if (zcValue < point && zcValue < point) return 0
		if (!str) {
			// 倒车
			if (dcValue >= point) return 2
			else return 0
		} else {
			console.log(111)
			if (zcValue >= point) return 3
			else return 0
			// 正车
		}
	}
})

const changeSingeVideo = (idx) => {
	// initCreatePlay.value[idx].unload()

	// initCreatePlay.value[idx].load({
	//   url:input.value
	// })
	// initCreatePlay.value[idx].pause()
	// initCreatePlay.value[idx].play();
	initCreatePlay.value[idx].destroy()
	initCreatePlay.value[idx] = mpegts.createPlayer(
		{
			type: 'flv', // could also be mpegts, m2ts, flv
			isLive: true,
			// url: "http://1.12.237.14:8432/live?port=1935&app=live&stream=myapp",
			url: input.value[idx],
			hasAudio: false,
			hasVideo: true
		},
		{
			...option
		}
	)
	initCreatePlay.value[idx].attachMediaElement(videoRefList.value[idx])
	initCreatePlay.value[idx].load()
	initCreatePlay.value[idx].play()
}
// const createPlayer = ()
onMounted(() => {
	if (mpegts.getFeatureList().mseLivePlayback) {
		videoRefList.value.forEach((el, idx) => {
			initCreatePlay.value.push(
				mpegts.createPlayer(
					{
						type: 'flv', // could also be mpegts, m2ts, flv
						isLive: true,
						url: 'http://1.12.237.14:8432/live?port=1935&app=live1&stream=myapp1',
						hasAudio: false,
						hasVideo: true
					},
					{
						...option
					}
				)
			)
			initCreatePlay.value[idx].attachMediaElement(el)
			initCreatePlay.value[idx].load()
			// initCreatePlay.value[idx].play();
		})
	}
	// mpegts.getFeatureList((res) => {
	//   console.log("================getFeatureList", res);
	// });
})

onUnmounted(() => {
	videoRefList.value.forEach((el, idx) => {
		initCreatePlay.value[idx].destroy()
	})
})
</script>

<style lang="scss" scoped>
.leftEngine,
.rightEngine {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
.round {
	position: absolute;
	left: 843px;
	top: 496px;
	padding-top: 15px;
	padding-left: 10px;
	scale: 0.8;
}
.warning {
	background-color: rgb(214, 58, 58) !important;
}
.stoping {
	background: gray !important;
}
.running {
	background-color: green !important;
}
.round div {
	background: rgba(192, 192, 192, 1);
}
// rgb(214, 58, 58)
.circle {
	width: 57px;
	height: 45px;
	z-index: 999;
	text-align: center;
	top: 20px;
	left: 16px;
	position: absolute;
}
.circle_bottom {
	background: rgba(58, 150, 225, 0.4);
	width: 60px;
	height: 50px;
	filter: alpha(opacity=40);
	position: absolute;
	top: 19px;
	left: 15px;
	display: none;
}
.circle_bottom2 {
	background: rgba(58, 150, 225, 0.2);
	// border-radius:100%;
	width: 69px;
	height: 57px;
	filter: alpha(opacity=20);
	// z-index:-110;
	position: relative;
	display: none;
}
.animation {
	-webkit-animation: twinkling 1s infinite ease-in-out;
	animation: twinkling 1s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.animation2 {
	-webkit-animation: twinkling 1s infinite ease-in-out;
	animation: twinkling 1s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@keyframes twinkling {
	0% {
		opacity: 0.2;
		filter: alpha(opacity=20);
		-webkit-transform: scale(1);
	}
	50% {
		opacity: 0.5;
		filter: alpha(opacity=50);
		-webkit-transform: scale(1.12);
	}
	100% {
		opacity: 0.2;
		filter: alpha(opacity=20);
		-webkit-transform: scale(1);
	}
}

// <div class="round">
//         <div class="circle"><a>消费进阶</a></div>
//         <div class="circle_bottom animation "></div>
//         <div class="circle_bottom2 animation2 "></div>
//     </div>

// 动画
.clPcolor {
	width: 50px;
	height: 50px;
	background-color: green;
	animation: clP 0.5s infinite;
}
@keyframes clP {
	from {
		opacity: 1;
	}
	to {
		// background-color: transparent;
		opacity: 0.1;
	}
}
#video {
	transform: translate3d(0, 0, 0);
	vertical-align: middle;
}
.enginebj {
	position: relative;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.content {
	font-size: 32px;
	text-align: center;
}
canvas {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: -1;
}
:deep(.el-card__body) {
	padding: 10px !important;
}
video::-webkit-media-controls-timeline {
	display: none !important;
}
.wrap {
	display: flex;
	position: relative;
	width: 188px;
	height: 660px;
	background: url('@/assets/image/hostEngine.png') no-repeat;
	background-size: 100% 100%;
	background-position: top center;
	@media (min-width: 1680px) and (max-width: 1920px) {
		scale: 0.95;
	}
	@media (min-width: 1600px) and (max-width: 1680px) {
		scale: 0.9;
	}
	@media (min-width: 1440px) and (max-width: 1600px) {
		// scale: 0.90;
		scale: 0.85;
	}
	@media (min-width: 1366px) and (max-width: 1440px) {
		// scale: 0.90;
		scale: 0.65;
	}
	@media (min-width: 1280px) and (max-width: 1366px) {
		// scale: 0.90;
		// scale: 0.7;
		scale: 0.6;
	}
	@media (min-width: 1024px) and (max-width: 1280px) {
		// scale: 0.90;
		// scale: 0.7;
		scale: 0.65;
	}
}
//
</style>
